<template>
  <div>
    <van-grid :gutter="2" :border="true" :column-num="4">
      <van-grid-item v-for="list in this.gridLists" :key="list.id">
        <p class="grid-one">{{list.one}}</p>
        <p class="grid-two">{{list.two}}</p>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <h3 class="padbtn">里程抵现</h3>
        <span class="grid-span">100里程=1元</span>
        <span class="grid-span padbtn">里程直接当钱花</span>
        <van-image
          src="//gw.alicdn.com/tfs/TB1Smhgw7UmBKNjSZFOXXab2XXa-235-146.png_140x10000.jpg_.webp"
        />
      </van-grid-item>
      <van-grid-item>
        <h3 class="padbtn">里程抵现</h3>
        <span class="grid-span">100里程=1元</span>
        <span class="grid-span padbtn">里程直接当钱花</span>
        <van-image
          src="//gw.alicdn.com/tfs/TB1gsUwp7T2gK0jSZPcXXcKkpXa-234-146.png_140x10000.jpg_.webp"
        />
      </van-grid-item>
      <van-grid-item>
        <h3 class="padbtn">里程抵现</h3>
        <span class="grid-span">100里程=1元</span>
        <span class="grid-span padbtn">里程直接当钱花</span>

        <van-image
          src="//gw.alicdn.com/tfs/TB1WLo_wHZnBKNjSZFKXXcGOVXa-234-146.png_140x10000.jpg_.webp"
        />
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "Grid",
  data() {
    return {
      gridLists: [
        {
          id: "001",
          one: "出境游",
          two: "走遍全球",
        },
        {
          id: "002",
          one: "旅游度假",
          two: "精选线路",
        },
        {
          id: "003",
          one: "周边游",
          two: "乐享周末",
        },
        {
          id: "004",
          one: "出境购",
          two: "免税购物",
        },
        {
          id: "005",
          one: "签证/上网",
          two: "入境政策查询",
        },
        {
          id: "006",
          one: "接送/出租",
          two: "一键预约",
        },
        {
          id: "007",
          one: "邮轮游",
          two: "住海上城堡",
        },
        {
          id: "008",
          one: "全部",
          two: "更多推荐",
        },
      ],
    };
  },
};
</script>

<style scoped>
.grid-one {
  color: rgb(51, 51, 51);
  display: block;
  margin-bottom: 5px;
}
.grid-two {
  font-size: 11px;
  color: darkslategray;
}
.padbtn {
  padding-bottom: 12px;
}
.grid-span {
  color: rgb(51, 51, 51);
  font-size: 11px;
}
</style>